//经责大屏
/**
公共样式
 */
//标题公共样式
@title: {
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 48px;
  font-size: 18px;
  color: #cde5ff;
  font-weight: 700;
};
//图表标题样式
@chartTitle: {
  width: 165px;
  font-size: 16px;
  color: #cde5ff;
  font-weight: 700;
  position: absolute;
  padding-bottom: 2px;
  border-bottom: 1px solid #319ae0;
  z-index: 1;
  &:before {
    content: "";
    display: inline-block;
    background-color: #27d6d6;
    width: 10px;
    height: 10px;
    margin-right: 6px;
  }
};
//图表公共样式
@chart: {
  width: 100%;
  height: 100%;
  background: #17254d;
};
.content {
  width: 100%;
  height: 100vh;
  background-color: #071537;
  overflow-y: auto;
  color: #cde5ff;
  &::-webkit-scrollbar {
    display: none;
  }
  //logo标题
  .content-header {
    width: 100%;
    height: 76px;
    background: url("@/assets/images/top@2x.png") no-repeat center/100% auto;
    display: flex;
    justify-content: end;
    padding: 10px 64px 0;
    .header-btn {
      width: 140px;
      height: 28px;
      background: #123865;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: skewX(-25deg);
      cursor: pointer;
      .btn {
        transform: skewX(25deg);
        font-size: 14px;
        color: #cde5ff;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        .el-icon {
          font-size: 18px;
          margin-right: 6px;
        }
      }
    }
  }
  .content-body {
    padding: 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 32px;
    .body-generalSituation {
      width: 1792px;
      height: 596px;
      justify-content: space-between;
      .generalSituation-title {
        display: flex;
        justify-content: space-between;
        //审计项目概况
        .title-left {
          width: 1184px;
          height: 100%;
          background: url("@/assets/images/titlezhong@2x.png") no-repeat center/100% auto;
          @title();
          .left-body {
            display: flex;
            justify-content: space-between;
          }
        }
        .title-right {
          width: 576px;
          height: 100%;
          background: url("@/assets/images/titlexiao@2x.png") no-repeat center/100% auto;
          @title();
        }
      }
      .generalSituation-describe {
        display: flex;
        align-items: center;
        padding-left: 16px;
        height: 60px;
        font-size: 14px;
        color: #cde5ff;
        font-weight: 400;
      }
      .generalSituation-chart {
        display: flex;
        justify-content: space-between;
        .body-item {
          width: 576px;
          height: 496px;
          position: relative;
          .item-title {
            @chartTitle();
            margin: 18px 0 0 18px;
          }
          #distributionOfTime,
          #mapChart {
            @chart();
          }
          .item-form {
            height: 100%;
            overflow-y: auto;
            position: relative;
            background: #17254d;
            &::-webkit-scrollbar {
              width: 5px;
            }
            &::-webkit-scrollbar-thumb {
              background: #0d53b7;
            }
            &::-webkit-scrollbar-track {
              background: transparent;
            }
            &::-webkit-scrollbar-track-piece {
              background: transparent;
            }
            .th-td,
            .tr-td {
              display: flex;
              align-items: center;
              color: #cde5ff;
              &:nth-child(1) {
                flex: 144;
              }
              &:nth-child(2) {
                flex: 80;
              }
              &:nth-child(3) {
                flex: 136;
              }
              &:nth-child(4) {
                flex: 112;
              }
              &:nth-child(5) {
                cursor: pointer;
                flex: 32;
              }
            }
            .form-th {
              height: 56px;
              background-image: url("@/assets/images/formTitleXiao@2x.png"); /* 设置背景图片路径 */
              background-repeat: no-repeat; /* 不重复平铺背景图片 */
              background-size: cover; /* 调整背景图片大小以完全覆盖元素 */
              background-position: center; /* 居中显示背景图片 */
              background-color: #17254c; /* 设置背景颜色为黄色（#ffcc00）*/
              position: sticky;
              top: 0;
            }
            .form-tr {
              height: 48px;
              font-size: 16px;
              font-weight: 700;
              &:nth-child(2n) {
                background-color: #17254c;
              }
              &:nth-child(2n + 1) {
                background-color: #19305a;
              }
              .tr-td {
                &:nth-child(4) {
                  cursor: pointer;
                }
              }
            }
            .form-th,
            .form-tr {
              padding: 0 36px;
              font-size: 14px;
              font-weight: 400;
              display: flex;
            }
            .form-noData {
              font-size: 16px;
              text-align: center;
              padding-top: 10px;
            }
            .form-noData {
              font-size: 16px;
              text-align: center;
              padding-top: 10px;
            }
          }
        }
      }
    }
    //审计成果及整改效益总览
    .body-overview {
      width: 1792px;
      height: 384px;
      .overview-title {
        background: url("@/assets/images/titleda@2x.png") no-repeat center/100% auto;
        @title();
        .title-left {
          margin-right: 64px;
        }
        .title-right {
          width: 172px;
          display: flex;
          align-items: center;
          .right-year {
            width: 72px;
            margin-right: 10px;
            text-wrap: none;
          }
          :deep(.right-select) {
            --el-border-color-light: #0c225b;
            --el-bg-color-overlay: #0c225b;
            .el-select__wrapper.el-tooltip__trigger.el-tooltip__trigger {
              background: rgba(49, 154, 224, 0.4);
              border: 1px solid #27d6d6;
              border-radius: 4px;
              .el-select__placeholder {
                color: #cde5ff;
              }
              .el-select__selected-item.el-select__placeholder.is-transparent {
                font-size: 14px;
                color: #cde5ff;
                font-weight: 700;
              }
            }
            .select-option {
              background: #0c225b;
              color: #fff;
              .el-select-dropdown__item {
                color: #fff;
                font-weight: 500;
              }
              .is-hovering {
                background: rgba(49, 154, 224, 0.4);
              }
            }
          }
        }
      }
      .overview-body {
        height: 344px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        padding: 56px 40px 56px 100px;
        background: #17254d;
        .body-item {
          border: 2px solid;
          border-left: none;
          border-image: linear-gradient(to right, rgba(49, 154, 224, 0) 50%, #319ae0 100%) 1;
          background-image: linear-gradient(104deg, rgba(13, 63, 128, 0) 0%, #0d3f80 100%);
          width: 350px;
          height: 88px;
          display: flex;
          flex-direction: column;
          padding-left: 76px;
          justify-content: center;
          position: relative;
          .item-figure {
            font-size: 32px;
            color: #27d6d6;
            font-weight: 400;
          }
          .item-title {
            font-size: 16px;
            color: #cde5ff;
            font-weight: 400;
          }
          &:before {
            content: "";
            width: 120px;
            height: 120px;
            position: absolute;
            left: -60px;
            top: -16px;
            border-radius: 50%;
          }
          &:nth-child(1):before {
            background: url("@/assets/images/ICON1@2x.png") no-repeat center/100% auto;
          }
          &:nth-child(2):before {
            background: url("@/assets/images/ICON2@2x.png") no-repeat center/100% auto;
          }
          &:nth-child(3):before {
            background: url("@/assets/images/ICON3@2x.png") no-repeat center/100% auto;
          }
          &:nth-child(4):before {
            background: url("@/assets/images/ICON4@2x.png") no-repeat center/100% auto;
          }
          &:nth-child(5):before {
            background: url("@/assets/images/ICON5@2x.png") no-repeat center/100% auto;
          }
          &:nth-child(6):before {
            background: url("@/assets/images/ICON6@2x.png") no-repeat center/100% auto;
          }
          &:nth-child(7):before {
            background: url("@/assets/images/ICON7@2x.png") no-repeat center/100% auto;
          }
          &:nth-child(8):before {
            background: url("@/assets/images/ICON8@2x.png") no-repeat center/100% auto;
          }
        }
      }
    }
    //审计发现问题情况与发现整改情况
    .body-findTheRectification {
      width: 1792px;
      height: 576px;
      .findTheRectification-title {
        background: url("@/assets/images/titleda@2x.png") no-repeat center/100% auto;
        @title();
      }
      :deep(.findTheRectification-body) {
        width: 100%;
        height: 536px;
        position: relative;
        background: #17254d;
        --vxe-table-header-background-color: transparent !important;
        --vxe-table-body-background-color: transparent !important;
        --vxe-table-border-color: transparent !important;
        overflow-x: auto;
        overflow-y: hidden;
        &::-webkit-scrollbar {
          width: 10px;
          height: 10px;
        }
        /*滚动条的轨道*/
        &::-webkit-scrollbar-track {
          background: transparent;
        }
        /*滚动条里面的小方块，能向上向下移动*/
        &::-webkit-scrollbar-thumb {
          background-color: rgba(255, 255, 255, 0.2);
          border-radius: 5px;
        }
        .body-scrollbar {
          width: 150%;
          .vxe-body--row {
           .vxe-body--column:first-child {
              cursor: pointer;
            }
          }
        }
        .vxe-table--main-wrapper {
          background: transparent;
        }
        /*滚动条整体部分*/
        .vxe-table--render-default .vxe-table--border-line,
        .vxe-table--header-border-line {
          border: none;
        }
        thead {
          background: url("@/assets/images/formTitle@2x.png") no-repeat center/100% 100% !important;
          .vxe-header--row {
            color: #cde5ff;
            font-weight: 700;
            .vxe-header--column {
              border-right: 1px solid #1a315c;
              border-left: 1px solid #1a315c;
            }
            &:nth-child(1) {
              height: 44px;
            }
            &:nth-child(2) {
              height: 64px;
              .vxe-header--column {
                background-size: unset;
                background-image: linear-gradient(180deg, rgba(24, 39, 79, 0.1) 0%, rgba(12, 45, 109, 0.1) 100%);
                border: 1px solid #1a315c;
                z-index: 2;
              }
            }
          }
        }
        tbody {
          .vxe-body--row {
            font-size: 14px;
            color: #cde5ff;
            font-weight: 400;
            .vxe-body--column {
              background-image: none;
            }
            &:nth-child(2n) {
              background-color: transparent;
            }
            &:nth-child(2n-1) {
              background-color: #19305b;
            }
          }
        }
      }
    }
    //审计评价展示
    .body-evaluationDisplay {
      width: 1792px;
      height: 1592px;

      .evaluationDisplay-title {
        background: url("@/assets/images/titleda@2x.png") no-repeat center/100% auto;
        @title();
        margin-bottom: 16px;
        .title-left {
          margin-right: 64px;
        }
        .title-right {
          width: 426px;
          display: flex;
          align-items: center;
          .right-year {
            width: 178px;
            margin-right: 10px;
            text-wrap: none;
          }
          :deep(.right-select) {
            --el-border-color-light: #0c225b;
            --el-bg-color-overlay: #0c225b;
            .el-select__wrapper.el-tooltip__trigger.el-tooltip__trigger {
              background: rgba(49, 154, 224, 0.4);
              border: 1px solid #27d6d6;
              border-radius: 4px;
              .el-select__placeholder {
                color: #cde5ff;
              }
              .el-select__selected-item.el-select__placeholder.is-transparent {
                font-size: 14px;
                color: #cde5ff;
              }
            }
            .select-option {
              background: #0c225b;
              color: #fff;
              .el-select-dropdown__item {
                color: #fff;
                font-weight: 500;
              }
              .is-hovering {
                background: rgba(49, 154, 224, 0.4);
              }
            }
          }
        }
      }
      .evaluationDisplay-body {
        display: flex;
        flex-wrap: wrap;
        row-gap: 16px;
        column-gap: 30px;
        //图表标题
        .chart-title {
          width: 100%;
          height: 32px;
          border: 1px solid;
          border-image: linear-gradient(to right, #27d6d6, rgba(65, 106, 203, 0)) 1;
          background-image: linear-gradient(180deg, rgba(49, 154, 224, 0) 0%, rgba(65, 106, 203, 0.26) 100%);
          font-size: 16px;
          color: #cde5ff;
          font-weight: 700;
          display: flex;
          align-items: center;
          padding-left: 16px;
          .icon {
            width: 20px;
            height: 20px;
            display: inline-block;
            background: url("@/assets/images/diandian@2x.png") no-repeat center/100% auto;
            margin-right: 10px;
          }
        }
        .body-chart {
          width: 100%;
          height: 466px;
          display: flex;
          justify-content: space-between;
          //经营管理绩效评价
          .chart-performanceEvaluation {
            width: 576px;
            height: 466px;
            box-sizing: border-box;
            .chart-body {
              width: 100%;
              height: 434px;
              position: relative;
              .performanceEvaluation-tooltip {
                width: 100%;
                height: 434px;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                pointer-events: none;
                .tooltip-base {
                  position: relative;
                  height: auto;
                  background: #05164d;
                  padding: 10px;
                  color: #fff;
                  font-size: 13px;
                  .base-list {
                    margin-bottom: 10px;
                    &:last-child {
                      margin-bottom: 0;
                    }
                    .year-title {
                      display: flex;
                      align-items: center;
                      column-gap: 5px;
                      .title-icon {
                        width: 15px;
                        height: 7px;
                      }
                    }
                    .list-content {
                      display: flex;
                      justify-content: space-between;
                      flex-wrap: wrap;
                      .content-value {
                        width: 100%;
                      }
                    }
                  }
                }
                //市场经营
                .tooltip-bazaar {
                  width: 90px;
                }
                //政企运营
                .tooltip-governmentEnterprise {
                  width: 130px;
                }
                //网建运维
                .tooltip-netConstruction {
                  width: 180px;
                }
                //综合管理
                .tooltip-synthesize {
                  width: 190px;
                }
                //党建引领
                .tooltip-partyBuilding {
                  width: 210px;
                }
              }
              #performanceEvaluation {
                @chart();
              }
            }
          }
          //问卷调查结果
          .chart-questionnaireSurvey {
            width: 1184px;
            height: 466px;
            box-sizing: border-box;
            .chart-body {
              display: flex;
              justify-content: space-between;
              .body-left,
              .body-right {
                width: 576px;
                height: 434px;
                position: relative;
                display: flex;
                align-items: end;
                justify-content: center;
                #roomForImprovement,
                #scoreResult {
                  @chart();
                }
                .item-title {
                  margin-bottom: 10px;
                  width: 100%;
                  text-align: center;
                  font-size: 16px;
                  color: #cde5ff;
                  font-weight: 700;
                  position: absolute;
                  padding-bottom: 2px;
                  z-index: 1;
                  &:before {
                    content: "";
                    display: inline-block;
                    background-color: #27d6d6;
                    width: 10px;
                    height: 10px;
                    margin-right: 6px;
                  }
                }
              }
            }
          }
        }
        //审计发现问题分布图
        .body-problemProfile {
          width: 1792px;
          height: 466px;
          .chart-body {
            display: flex;
            justify-content: space-between;
            .body-left,
            .body-right {
              width: 880px;
              height: 434px;

              position: relative;
              #problemProfile,
              #serviceLine {
                @chart();
              }
              .item-title {
                @chartTitle();
                margin: 18px 0 0 18px;
              }
            }
          }
        }
        //任期内指标完成情况
        .body-performance {
          width: 1792px;
          height: 466px;
          .chart-body {
            display: flex;
            justify-content: space-between;
            .body-left,
            .body-center,
            .body-right {
              width: 576px;
              height: 442px;
              position: relative;
              #satisfaction,
              #profitRealization,
              #marketShares {
                @chart();
              }
              .item-title {
                @chartTitle();
                margin: 18px 0 0 18px;
              }
            }
          }
        }
      }
    }
  }
  //弹窗
  :deep(.modal-class) {
    backdrop-filter: blur(15px);
    .content-dialog {
      width: 1440px;
      height: 680px;
      background: url("@/assets/images/dialog.png") no-repeat center/100% auto;
      .el-dialog__header {
        margin: 0;
        .dialog-header {
          height: 90px;
          font-size: 20px;
          font-weight: 700;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          .header-close {
            position: absolute;
            font-size: 30px;
            right: 62px;
            color: #2f94d9;
            cursor: pointer;
          }
        }
      }
      --el-text-color-primary: #cde5ff;
      --el-dialog-padding-primary: 0;
      --vxe-table-header-background-color: transparent;
      --vxe-table-body-background-color: transparent;
      --vxe-table-border-color: transparent;
      display: flex;
      flex-direction: column;
      .el-dialog__body {
        flex: 1;
        overflow: hidden;
        padding: 0 32px;
        margin-bottom: 46px;
        .vxe-table--empty-content {
          color: #cde5ff;
        }
        .vxe-table--main-wrapper {
          background: transparent;
        }
        /*滚动条整体部分*/
        .body-scrollbar {
          & ::-webkit-scrollbar {
            width: 10px;
            background: transparent;
          }
          & ::-webkit-scrollbar-track {
            background: transparent;
          }
          & ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 8px;
          }
        }
        .vxe-table--render-default .vxe-table--border-line,
        .vxe-table--header-border-line {
          border: none;
        }
        thead {
          background: url("@/assets/images/dialogForm.png") no-repeat center/100% 100% !important;
          .vxe-header--row {
            color: #cde5ff;
            font-weight: 700;
            &:nth-child(1) {
              height: 44px;
            }
            &:nth-child(2) {
              height: 64px;
              .vxe-header--column {
                background-size: unset;
                background-image: linear-gradient(180deg, rgba(24, 39, 79, 0.1) 0%, rgba(12, 45, 109, 0.1) 100%);
                border: 1px solid #1a315c;
                z-index: 2;
              }
            }
          }
        }
        tbody {
          .vxe-body--row {
            font-size: 14px;
            color: #cde5ff;
            font-weight: 400;
            .vxe-body--column {
              background-image: none;
            }
            &:nth-child(2n) {
              background-color: transparent;
            }
            &:nth-child(2n-1) {
              background: rgba(49, 154, 224, 0.1);
            }
          }
        }
      }
    }
  }
}
